<template>
  <!--双人数字人驱动轴-->
  <line-item ref="lineItemRef" class="double-drive-line" :timeline-item="timelineItem">
    <template v-for="(item, index) in sliderArr" :slot="index">
      <div v-if="item.mode === 'text'" :key="index" class="text-driver">
        <canvas ref="canvasTextRef" class="text-canvas"></canvas>
        <div ref="canvasRef" class="audio-canvas"></div>
      </div>
      <div v-else :key="index" ref="canvasRef" class="audio-driver"></div>
    </template>
  </line-item>
</template>
<script>
import multiMixins1 from '@veditor/components/timeLine/js/multiTrackNew';
import LineItem from '@veditor/components/timeLine/components/lineItem.vue';

export default {
  name: 'DoubleDrive',
  components: { LineItem },
  mixins: [multiMixins1],
  methods: {
    // 绘制文本
    async renderDoubleTextCanvas() {
      const { timelineItem } = this;
      const { sliderArr } = timelineItem;
      let textCanvasIndex = 0;
      const textSliderArr = [];
      for (let i = 0; i < sliderArr.length; i++) {
        const item = sliderArr[i];
        const { mode } = item;
        if (mode === 'text') {
          if (this.$refs.canvasTextRef) {
            const { offsetWidth: width, offsetHeight: height } =
              this.$refs.canvasTextRef[textCanvasIndex];
            if (width > 0) {
              timelineItem.calcTextPosition(item, width);
              textSliderArr.push({ ...item, width, height });
              textCanvasIndex++;
              continue;
            }
          }
          return;
        }
      }
      return this.renderTextCanvasWorker(textSliderArr);
    },
  },
};
</script>
<style lang="stylus">
.double-drive-line
  .line-item
    background-color #22574c
    color #00866c
  .text-driver
    display flex
    padding 0 4px
    flex-direction column
    height 100%
  .audio-driver
    padding 0 4px
    min-width 4px
  .text-canvas
  .audio-canvas
    width 100%
    height 13px
    min-width 4px
</style>
